<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../css/animate.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .demo {
            width: 200px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
        }

        .demo a {
            padding-left: 10px;
            padding-right: 10px;
            line-height: 30px;
            border: 1px solid #3A3A3A;
            display: inline-block;
            margin-left: 10px;
            margin-right: 10px;
            text-decoration: none;
        }

        .demo a:hover {
            background-color: #BDF7F8;
        }

        .header {
            text-align: center;
            line-height: 30px
        }

        .item {
            width: 600px;
            padding: 1em;
            background: #eee;
            display: none;
            position: relative;
            -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
            -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
            box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
            border-radius: 3px;
            color: #000;
        }

        .item-close {
            cursor: pointer;
            right: 5px;
            top: 5px;
            position: absolute;
            background: #222;
            color: #fff;
            border-radius: 100%;
            font-size: 14px;
            height: 24px;
            line-height: 22px;
            text-align: center;
            width: 24px;
        }

        .container {
            margin: 150px auto;
            max-width: 960px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="image">
        <img src="../img/loginimage.png" alt="">
    </div>
    <div class="con">
        <div class="pic">
            <img src="../img/login-2.png" alt="">
        </div>
        <div class="inner">
            <h2>注册</h2><span>已有账号<a href="login.html"><i>在此登录</i></a></span>
            <p>
                <input type="text" placeholder="手机号" id="phoneipt">
            </p>
            <p class="p2">
                <input type="text" placeholder="短信校验码">
                <button>获取短信校验码</button>
            </p>
            <p>
                <input type="password" placeholder="密码" id="password">
            </p>
            <p>
                <input type="password" placeholder="重复密码" id="password-two">
                <span class="pass-span"></span>
            </p>
            <p class="p5">
                <input type="button" value="同意协议并注册" id="login-btn">
            </p>
            <p class="p6">
                《聚美优品用户协议》<i>《聚美隐私权政策》</i>

            </p>
        </div>
    </div>
    <div class="footer">
        <p>Copyright©2010-2015 北京创锐文化传媒有限公司Jumei.com 保留一切权利。客服热线：400-123-8888</p>
        <p>京公网安备11010102001226号 | 京ICP证111033号 | 食品流通许可证SP11010511101165515（1-1） | 营业执照 | 公示制度</p>
        <img src="../img/login-footer.png" alt="">
    </div>
    <header class="header">

    </header>
    <div class="demo">

    </div>
    <div id="item" class="item">
        <h1 style="font-size: 20px;color: #111;text-align: center;font-weight: 0;line-height: 44px;"
            class="text-effect">协议订立须知</h1>
        <p style="line-height: 24px;color: #111;">
            在您注册成为聚美用户的过程中，您需要完成我们的注册流程并通过点击同意的形式签署《聚美优品用户协议》、《聚美隐私权政策》。
            ★ 审慎阅读 ：您在申请用户注册流程中点击同意并接受协议之前，应当认真阅读《聚美优品用户协议》和《聚美隐私权政策》（“协议”）。
            请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、法律适用和争议解决条款，并确定了解我们对您个人信息的处理规则。您有权选择同意或者不同意协议。 如您对协议有任何疑问，可向聚美客服咨询。
            ★ 签约动作 ：当您按照注册页面提示填写信息、 点击“同意协议并注册”且完成全部注册程序后，
            即表示您已充分阅读、理解并接受协议的全部内容，您同意聚美可以依据隐私政策内容来处理您的个人信息，同时也表明您与聚美达成一致，成为聚美“用户”。
            阅读协议过程中，如您不同意相关协议或其中任何条款约定，应立即停止注册程序或停止使用聚美平台服务。
        </p>
        <p style="margin: 36px 0 88px 180px;">
            <input type="button" value="确   认"
                style="width: 240px;height: 46px;border: 0;background: #fe4070;font-size: 18px;color: #fff;line-height: 46px;text-align: center;border-radius: 10px;"
                id="x-btn">
        </p>
        <b class="item-close js-popup-close">x</b>
    </div>
    <div id="item1" class="item item--mod">

        <b class="item-close js-popup-close">x</b>
    </div>
</body>

</html>

<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/jquery.popup.min.js"></script>
<script src="../js/index.js"></script>
<script>

    $('#login-btn').click(function () {
        let username = $('#phoneipt').val()
        let password = $('#password').val()
        let passwordTwo = $('#password-two').val()
        if (password == passwordTwo) {
            $('.pass-span').html('')
            let loginAPI = 'http://jx.xuzhixiang.top/ap/api/reg.php'
            $.get(loginAPI, {
                username,
                password,
            }).then(res => {
                alert(res.msg)
                if (res.code == 1) {
                    location.href = 'login.html'
                }
            })
        } else {
            $('.pass-span').html('请检查密码')
        }

    })

    $(function () {
        $('#item').popup({
            time: 1000,
            classAnimateShow: 'flipInX',
            classAnimateHide: 'hinge',
            onPopupClose: function e() {
                // console.log('0')
            },
            onPopupInit: function e() {
                // console.log('1')
            },
        });
    })
</script>